<template>
  <div class="app-container">
    
<br>
<br>
    <el-form :model="query" ref="query" label-width="80px" style="width: 100%;">
      <el-row :gutter=10>
        <el-col :span=4>
          <el-form-item label="姓名/编号" prop="name">
            <el-input v-model="query.name" placeholder="请输入姓名/编号"/>
          </el-form-item>
        </el-col>
        <el-col :span=4 >
          <el-form-item label="社会职业" prop="jobId">
            <el-select style="width:100%" v-model="query.jobId" placeholder="请选择">
              <el-option
                v-for="item in jobs"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectQueryJob(item.id)"
                >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=4 >
          <el-form-item label="社会职称" prop="jobTitleId">
            <el-select style="width:100%" v-model="query.jobTitleId" placeholder="请选择" :disabled="queryJobTitleIsDisabled">
              <el-option
                v-for="item in queryJobTitles"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=4>
          <el-form-item label="状态" prop="status">
            <el-select style="width:100%" v-model="query.status" placeholder="请选择" >
              <el-option
                v-for="item in statusEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=4>
          <el-form-item label="职务" prop="status">
            <el-select style="width:100%" v-model="query.status" placeholder="请选择" >
              <el-option
                v-for="item in statusEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=6>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search" >搜索</el-button>
            <el-button @click="resetForm('query')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <br>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column v-if="false" label="id" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="工号" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.jobNumber }}
        </template>
      </el-table-column>
      <el-table-column label="企业职务" width="170" align="center">
        <template slot-scope="scope">
          <el-tag type="" v-for="(item, index) in scope.row.jobDutyList" :key="index" style="margin: 0 10px">
          {{ item.deptName+'——'+item.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.auditStatus | statusColorFilter">{{ scope.row.auditStatus | statusNameFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center" width="300" >
        <template slot-scope="scope">
          <el-button type="warning" v-if="scope.row.canAudit" @click="update(scope.row)" size="small">审批</el-button>
          <el-button type="primary"  @click="getInfo(scope.row)" size="small">详情</el-button>
          <el-button type="success" v-if="!scope.row.canAudit" @click="update(scope.row)" size="small">修改</el-button>
          <el-button type="danger" @click="deleteInfo(scope.$index)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="->, total, prev, pager, next"
      :total="this.total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="clickCurPage"
      >
    </el-pagination>
  
  <el-dialog title="用户详情" :visible.sync="infoVisible" width="1200px">
      <h2>自然信息</h2>
      <el-form ref="userInfo" :model="userInfo" label-width="120px">
        <el-row :gutter="10">
          <el-col :span=6>
            <el-form-item label="姓名">
                <el-input v-model="userInfo.name" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span=6>
            <el-form-item label="性别">
              <el-select style="width:100%" v-model="userInfo.sex" placeholder="请选择" :disabled="true" >
                  <el-option value="男"></el-option>
                  <el-option value="女"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=6 >
            <el-form-item label="学历">
              <el-select style="width:100%" v-model="userInfo.education" placeholder="请选择" :disabled="true" >
                <el-option
                  v-for="item in educationEnum"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=6 >
            <el-form-item label="社会职业">
              <el-select style="width:100%" v-model="userInfo.job" placeholder="请选择" :disabled="true" >
                <el-option
                  v-for="item in jobs"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=6 >
            <el-form-item label="社会职称">
              <el-select style="width:100%" v-model="userInfo.jobTitle" placeholder="请选择" :disabled="true" >
                <el-option
                  v-for="item in jobTitles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=8 >
            <el-form-item label="手机号">
                <el-input v-model="userInfo.phone" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="身份证号">
                <el-input v-model="userInfo.idCard" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <h2>人事信息</h2>
        <el-row :gutter="10">
          <el-col :span=6>
            <el-form-item label="工号">
                <el-input v-model="userInfo.jobNumber" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=8>
            <el-form-item label="入职时间" >
              <el-date-picker :disabled="true" 
                v-model="userInfo.joinTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="在职时长">
                <el-input v-model="userInfo.joinDay" :disabled="true" >
                  <template slot="append">天</template>
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=8>
            <el-form-item label="转正时间">
              <el-date-picker
                :disabled="true" 
                v-model="userInfo.toRealWorkerTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="离职时间">
              <el-date-picker
                :disabled="true" 
                v-model="userInfo.leaveTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=6>
            <el-form-item label="状态">
              <el-select style="width:100%" v-model="userInfo.status" placeholder="请选择" :disabled="true">
                <el-option
                  v-for="item in statusEnum"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <h2>工作信息</h2>
        <el-row :gutter="10">
          <el-col :span=8 >
            <el-form-item label="类型">
              <el-select style="width:100%" v-model="userInfo.jobType" placeholder="请选择" :disabled="true" >
                <el-option
                  v-for="item in jobTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="科室">
              <el-select style="width:100%" v-model="userInfo.jobOfficeList" multiple placeholder="请选择" :disabled="true" >
                <el-option
                  v-for="item in jobOffices"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=8>
            <el-form-item label="挂号费">
              <el-input type="Number" min=0 v-model="userInfo.registerPrice" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="企业职务" >
          <div style="background-color: white;width:80%;height:80px;border: 1px solid #E4E7ED;">
            <el-tag type="" v-for="(item, index) in userInfo.jobDutyList" :key="index" style="margin: 0 10px">{{
                item.deptName+'——'+item.name
            }}</el-tag>
          </div>
        </el-form-item>
        <!-- <div style="width:100%;border: 2px solid #E4E7ED;padding: 10px;">
          <el-row :gutter="10"  v-for="(deptWorkAddress, index) in userInfo.userDeptAndWorkAddressVOList" :key="index">
            <el-col :span=8>
              <el-form-item :label="deptWorkAddress.expiration != undefined ? '临时工作部门' :'工作部门'" prop="dept" label-width="120px" >
                <el-select v-model="deptWorkAddress.deptId" placeholder="请选择" :disabled="true">
                  <el-option
                    v-for="item in depts"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span=8 >
              <el-form-item label="工作地点" prop="workAddress">
                <el-select v-model="deptWorkAddress.workAddressId" placeholder="请选择" :disabled="true">
                  <el-option
                    v-for="item in workAddresses[index]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span=8 >
              <el-form-item label="有效期" v-show="deptWorkAddress.expiration != undefined">
                <el-input v-model="deptWorkAddress.expiration" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div> -->
      </el-form>
      <el-divider></el-divider>
      <h2>权限信息</h2>
      <el-row>
        <el-col :span=24 :offset=2>
          <div style="background-color: white;width:80%;border: 2px solid #E4E7ED;padding: 10px;">
            <el-tree 
              ref="menusInfo"
              :data="menusEnumInfo"
              show-checkbox
              node-key="id"
              :default-expand-all="true"
              :props="{children: 'children', label: 'name'}">
            </el-tree>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
  </el-dialog>
  <el-dialog title="修改用户" :visible.sync="formVisible" width="1200px" :closeOnClickModal="false">
      <h2>自然信息</h2>
      <el-form ref="form" :model="form" label-width="80px" :rules="formRules">
        <el-row :gutter="10">
          <el-col :span=6>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span=6>
            <el-form-item label="性别" prop="sex">
              <el-select style="width:100%" v-model="form.sex" placeholder="请选择">
                <el-option value="男"></el-option>
                <el-option value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=6 >
            <el-form-item label="学历" prop="education">
              <el-select style="width:100%" v-model="form.education" placeholder="请选择">
                <el-option
                  v-for="item in educationEnum"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=6 >
            <el-form-item label="社会职业" >
              <el-select style="width:100%" v-model="form.job" placeholder="请选择">
                <el-option
                  v-for="item in jobs"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="selectJob(item.id)"
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=6 >
            <el-form-item label="社会职称">
              <el-select style="width:100%" v-model="form.jobTitle" placeholder="请选择" :disabled="jobTitleIsDisabled">
                <el-option
                  v-for="item in jobTitles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=8 >
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" />
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <h2>人事信息</h2>
        <el-row :gutter="10">
          <el-col :span=6>
            <el-form-item label="工号">
                <el-input v-model="form.jobNumber" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=8>
            <el-form-item label="入职时间" :disabled="true" prop="joinTime">
              <el-date-picker
                v-model="form.joinTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="在职时长">
                <el-input v-model="form.joinDay" :disabled="true">
                  <template slot="append">天</template>
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=8>
            <el-form-item label="转正时间" >
              <el-date-picker
                v-model="form.toRealWorkerTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="离职时间" >
              <el-date-picker
                v-model="form.leaveTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span=6>
            <el-form-item label="状态">
              <el-select style="width:100%" v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="item in statusEnum"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <h2>工作信息</h2>
        <el-row :gutter="10" v-if="isDoctor">
          <el-col :span=8 >
            <el-form-item label="类型">
              <el-select style="width:100%" v-model="form.jobType" placeholder="请选择">
                <el-option
                  v-for="item in jobTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=8 :offset=4>
            <el-form-item label="科室">
              <el-select style="width:100%" v-model="form.jobOfficeList" multiple placeholder="请选择">
                <el-option
                  v-for="item in jobOffices"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="isDoctor">
          <el-col :span=8>
            <el-form-item label="挂号费">
              <el-input type="Number" min=0 v-model="form.registerPrice" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="企业职务" prop="jobDuty">
          <div style="background-color: white;width:80%;height:80px;border: 1px solid #E4E7ED;">
            <el-tag type="" v-for="(item, index) in form.jobDutyList" :key="item.id" closable @close="removeJobDuty(index)" style="margin: 0 10px">{{
                item.deptName+'——'+item.name
            }}</el-tag>
          </div>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span=10 >
            <el-form-item label="添加企业职务" label-width="120px">
              <el-cascader
              style="width:100%"
                :options="jobDutysEnums"
                @change="selectJobDuty"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <div style="width:100%;border: 2px solid #E4E7ED;padding: 10px;">
          <el-row :gutter="10"  v-for="(deptWorkAddress, index) in form.userDeptAndWorkAddressVOList" :key="index">
            <el-col :span=1>
              <el-button v-show="!deptWorkAddress.expiration" type="danger" icon="el-icon-delete" circle @click="removeDept(index)"></el-button>
            </el-col>
            <el-col :span=6 :offset="deptWorkAddress.expiration!=undefined?1:0">
              <el-form-item :label="deptWorkAddress.expiration != undefined ? '临时工作部门' :'工作部门'" prop="dept" label-width="120px">
                <el-select v-model="deptWorkAddress.deptId" placeholder="请选择" :disabled="deptWorkAddress.expiration != undefined">
                  <el-option
                    v-for="item in depts"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    @click.native="selectDept(item.id, index)"
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span=6>
              <el-form-item label="工作地点" prop="workAddress">
                <el-select v-model="deptWorkAddress.workAddressId" placeholder="请选择" :disabled="deptWorkAddress.expiration != undefined">
                  <el-option
                    v-for="item in workAddresses[index]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span=6 >
              <el-form-item label="有效期" v-show="deptWorkAddress.expiration != undefined" >
                <el-input v-model="deptWorkAddress.expiration" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type="primary" @click="form.userDeptAndWorkAddressVOList.push({userId: form.id})">添加部门</el-button>
        </div> -->
        <el-divider></el-divider>
        <h2>库操作权限</h2>
        <el-row :gutter="10">
            <el-col :span=15 :offset=2>
              <el-form-item v-for="(authInfo, index) in form.drugDepositoryUserAuthList" :key="index" :label="authInfo.drugDepositoryName" label-width="150px">
                <el-checkbox v-model="authInfo.isQuery">查看</el-checkbox>
                <el-checkbox v-model="authInfo.isSell">销售</el-checkbox>
                <el-checkbox v-model="authInfo.isInput">入库</el-checkbox>
                <el-checkbox v-model="authInfo.isOutput">出库</el-checkbox>
                <el-checkbox v-model="authInfo.isCheck">盘点</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <el-divider></el-divider>
      <h2>权限信息</h2>
        <el-row>
          <el-col :span=24 :offset=2>
            <div style="background-color: white;width:80%;border: 2px solid #E4E7ED;padding: 10px;">
              <el-tree
                ref="menusForm"
                :data="menusEnum"
                show-checkbox
                node-key="id"
                :default-expand-all="true"
                :props="{children: 'children', label: 'name'}">
              </el-tree>
            </div>
          </el-col>
        </el-row>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="commitBtnLoading" @click="confirm">确 定</el-button>
          <div style="width:200px;display: inline-block;"> </div>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
  </el-dialog>
  </div>
</template>

<script>
import { getList, editUser, getListInfo } from '@/api/user'
import { getList as getJobList } from '@/api/job'
import { getListByJobId } from '@/api/jobTitle'
import { getListByDeptId as getWorkAddressListByDeptId } from '@/api/workAddress'
import { getList as getDeptList } from '@/api/dept'
import { getList as getJobDutyList, getJobDutyTreeList } from '@/api/jobDuty'
import { getList as getJobOfficeList } from '@/api/jobOffice'
import { getList as getJobTypeList } from '@/api/jobType'
import { getListByUserId as getMenuListByUserId, getTreeList as getMenuTreeList } from '@/api/menu'
import { audit } from '@/api/auditFlow'
import template from '../guidance/template.vue'

export default {
  name: "UserList",
  components: { template },
  filters: {
    statusColorFilter(status) {
      const statusMap = ['success', 'success', 'gray', 'danger']
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = ['待审批', '待审批', '在职', '离职']
      return statusMap[status]
    }
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) callback(new Error('请输入姓名')) 
      else callback()
    }
    const validateSex = (rule, value, callback) => {
      if (!value) callback(new Error('请选择姓别')) 
      else callback()
    }
    const validateEducation = (rule, value, callback) => {
      if (!value) callback(new Error('请选择学历')) 
      else callback()
    }
    const validateJob = (rule, value, callback) => {
      if (!value) callback(new Error('请选择社会职业')) 
      else callback()
    }
    const validatePhone = (rule, value, callback) => {
      if (!value) callback(new Error('请输入手机号')) 
      else callback()
    }
    const validateIdCard = (rule, value, callback) => {
      if (!value) callback(new Error('请输入身份证号')) 
      else callback()
    }
    const validateJoinTime = (rule, value, callback) => {
      if (!value) callback(new Error('请选择入职时间')) 
      else callback()
    }
    const validateDept = (rule, value, callback) => {
      var deptFlag = false
      for (const iterator of this.form.userDeptAndWorkAddressVOList) {
        if(iterator.deptId === undefined || iterator.deptId === '') {
          deptFlag = true
        }
      }
      if (deptFlag) callback(new Error('请选择部门')) 
      else callback()
    }
    const validateWorkAddress = (rule, value, callback) => {
      var workAddressFlag = false
      for (const iterator of this.form.userDeptAndWorkAddressVOList) {
        if(iterator.workAddressId === undefined || iterator.workAddressId === '') {
          workAddressFlag = true
        }
      }
      if (workAddressFlag) callback(new Error('请选择工作地点')) 
      else callback()
    }
    const validateJobDuty = (rule, value, callback) => {
      if (!this.form.jobDutyList || this.form.jobDutyList.length == 0) callback(new Error('请选择企业职务')) 
      else callback()
    }
    return {
      list: null,
      listLoading: true,
      commitBtnLoading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      curIndex: -1,
      infoVisible: false,
      formVisible: false,
      userInfo: {},
      form:{},
      formRules: {
        name: [{ required: true, trigger: 'blur', validator: validateName }],
        sex: [{ required: true, trigger: 'blur', validator: validateSex }],
        education: [{ required: true, trigger: 'blur', validator: validateEducation }],
        job: [{ required: true, trigger: 'blur', validator: validateJob }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        idCard: [{ required: true, trigger: 'blur', validator: validateIdCard }],
        joinTime: [{ required: true, trigger: 'blur', validator: validateJoinTime }],
        dept: [{ required: true, trigger: 'blur', validator: validateDept }],
        workAddress: [{ required: true, trigger: 'blur', validator: validateWorkAddress }],
        jobDuty: [{ required: true, trigger: 'blur', validator: validateJobDuty }],
      },
      statusEnum: [{id: 1, name: '在职'}, {id: 2, name: '离职'}],
      sexEnum: ["男", "女"],
      jobDutysEnums: [],
      tmpJobDuty: undefined,
      menus: [],
      menusEnum : [],
      menusEnumInfo : [],
      educationEnum: ["专科", "本科", "研究生", "博士生"],
      jobs : [],
      jobTitles: [],
      queryJobTitles: [],
      jobTypes:["中医", "西医"],
      jobOffices: ["内科","外科","耳鼻喉科"],
      depts: [],
      workAddresses: [],
      jobTitleIsDisabled: false,
      queryJobTitleIsDisabled: false,
      jobDutyIsDisabled: false,
      workAddressIsDisabled: false,
      query: {},
      isDoctor: false,
    }
  },
  created() {
    
    this.fetchData()
  },
  
  methods: {
    fetchData() {
      this.listLoading = true
      getList({currentPage: this.currentPage, pageSize: this.pageSize}).then(res=>{
        console.log("init list:", res.data)
        this.list = res.data.records
        this.list.forEach(item=>{
          item.job = item.jobId
          item.jobTitle = item.jobTitleId
        })
        this.total = res.data.total
        this.listLoading = false
        // enums
        getDeptList().then(deptRes=>{
          console.log("depts: ", deptRes.data)
          this.depts = deptRes.data
        })
        getJobList().then(jobRes=>{
          console.log("jobs: ", jobRes.data)
          this.jobs = jobRes.data
        })
        getJobOfficeList().then(jobOfficeRes=>{
          console.log("job office:", jobOfficeRes.data)
          this.jobOffices = jobOfficeRes.data
        })
        getJobTypeList().then(jobTypeRes=>{
          this.jobTypes = jobTypeRes.data
        })
      }).catch(err=>{
        console.log(err)
        this.listLoading = false
      })
    },
    selectJobDuty(jobs) {
      var tmpJobDuty = jobs[jobs.length - 1]
      if(!this.form.jobDutyList) this.form.jobDutyList = []
      for (const jobDuty of this.form.jobDutyList) {
        if(jobDuty.id === tmpJobDuty.id) {
          this.$message.error('企业职务重复添加');
          return;
        }
      }
      if(tmpJobDuty.name.includes("医生")) {
        this.isDoctor = true
      }
      var deptItem = jobs[jobs.length - 2];
      tmpJobDuty.deptId = deptItem.id
      tmpJobDuty.deptName = deptItem.name
      this.form.jobDutyList.push(tmpJobDuty)
      // 添加部门 放这里
      console.log(deptItem)
      this.form.userDeptAndWorkAddressVOList.push({
        userId: this.form.id,
        deptId: deptItem.id
      })
    },
    removeJobDuty(index) {
      this.form.jobDutyList.splice(index, 1)
      this.form.userDeptAndWorkAddressVOList.splice(index, 1)
      for (const item of this.form.jobDutyList) {
        if(item.name.includes("医生")) {
          this.isDoctor = true
        } else {
          this.isDoctor = false
        }
      }
    },
    clickCurPage(val){
      this.currentPage = val
      this.fetchData()
    },
    getInfo(row) {
      getListInfo(row.id).then(res=> {
        this.userInfo = res.data
        console.log("userInfo", this.userInfo)
        getMenuTreeList().then(menusRes => {
          this.menusEnumInfo = this.setDesiable(JSON.parse(JSON.stringify(menusRes.data)))
          getMenuListByUserId(row.id).then(menuListRes=>{
            console.log("menuListRes:", menuListRes)
            this.$refs.menusInfo.setCheckedKeys(menuListRes.data)
          })
        })
        this.userInfo.userDeptAndWorkAddressVOList.forEach(item=>{
          getWorkAddressListByDeptId({'deptId' : item.deptId}).then(workAddressRes=> {
            console.log(workAddressRes)
            this.workAddresses.push(workAddressRes.data)
          })
        })
        this.infoVisible = true
        
        getJobList().then(jobRes=>{
          console.log("jobs: ", jobRes.data)
          this.jobs = jobRes.data
        })
        if(this.userInfo.job) {
          getListByJobId({'jobId': this.userInfo.job}).then(jobTitleRes=> {
            this.jobTitles = jobTitleRes.data
          })
        }
        getJobDutyTreeList({"deptId": 1}).then(res=> {
          console.log(res)
          this.jobDutysEnums = res.data
        })
      })
    },
    update(row) {
      this.reset()
      getListInfo(row.id).then(res=> {
        console.log(res)
        this.form = res.data
        this.form.canAudit = row.canAudit
        getMenuTreeList().then(menusRes => {
          this.menusEnum = menusRes.data
          console.log('menusEnum', this.menusEnum)
          getMenuListByUserId(this.form.id).then(menuListRes=>{
            console.log("menuListRes:", menuListRes.data)
            this.$refs.menusForm.setCheckedKeys(menuListRes.data.filter(id=> !this.menusEnum.map(menu => menu.id).includes(id)))
          })
        })
        this.formVisible = true
        if(this.form.job) {
          getListByJobId({'jobId': this.form.job}).then(jobTitleRes=> {
            this.jobTitles = jobTitleRes.data
          })
        }
        this.form.userDeptAndWorkAddressVOList.forEach(item=>{
          getWorkAddressListByDeptId({'deptId' : item.deptId}).then(workAddressRes=> {
            console.log(workAddressRes)
            this.workAddresses.push(workAddressRes.data)
          })
        })
        getJobDutyTreeList({"deptId": 1}).then(res=> {
          console.log(res)
          this.jobDutysEnums = res.data
        })
        for (const item of this.form.jobDutyList) {
          if(item.name.includes("医生")) {
            this.isDoctor = true
          } else {
            this.isDoctor = false
          }
        }
      })
    },
    setDesiable(menusEnum) {
      for (const menuInfo of menusEnum) {
        menuInfo.disabled = true
        if(menuInfo.children && menuInfo.children.length > 0) {
          this.setDesiable(menuInfo.children)
        }
      }
      return menusEnum;
    },
    deleteInfo(index) {
      this.$confirm('确定删除该部门?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.list.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    reset(){
      this.form = {}
    },
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.commitBtnLoading = true
          var jobDutyItemList = JSON.parse(JSON.stringify(this.form.jobDutyList))
          console.log("jobDutyItemList", jobDutyItemList)
          this.form.jobDutyList = this.form.jobDutyList.map(jobDuty => jobDuty.id)
          // for (let i = 0; i < this.form.userDeptAndWorkAddressVOList.length; i++) {
          //   const element = this.form.userDeptAndWorkAddressVOList[i];
          //   if(element.expiration) {
          //     this.form.userDeptAndWorkAddressVOList.splice(i, 1)
          //   }
          // }
          this.form.userDeptAndWorkAddressVOList = []
          for (const jobDuty of jobDutyItemList) {
            console.log("jobDuty", jobDuty)
            this.form.userDeptAndWorkAddressVOList.push({
              userId: this.form.id,
              deptId: jobDuty.deptId
            })
          }
          this.$set(this.form, 'menuList', this.$refs.menusForm.getCheckedKeys().concat(this.$refs.menusForm.getHalfCheckedKeys()))
          console.log("form", this.form)
          editUser(this.form).then(editRes=>{
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.userInfoVisible = false
            this.commitBtnLoading = false
            this.listLoading = true
            console.log(this.form.canAudit)
            if(this.form.canAudit) {
              audit({flowNo: 'ZC'+this.form.id, pass: true}).then(res=> {
                console.log(res)
                this.formVisible = false
                this.listLoading = false
                this.$tab.refreshPage({path: '/user/userList', name: "UserList"});
              })
            }
            this.formVisible = false
            this.listLoading = false
            this.$tab.refreshPage({path: '/user/userList', name: "UserList"});
          }).catch(err=>{
            console.log(err)
            console.log(err.msg)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      if(this.infoVisible == true) this.infoVisible = false
      if(this.formVisible == true) this.formVisible = false
      this.reset()
    },
    selectDept(deptId, index) {
      this.workAddressIsDisabled = true
      this.jobDutyIsDisabled = true
      this.$set(this.form, 'workAddress', '')
      getWorkAddressListByDeptId({'deptId' : deptId}).then(workAddressRes=> {
        console.log('workAddress: ', workAddressRes.data)
        this.$set(this.form.userDeptAndWorkAddressVOList[index], 'workAddressId', undefined)
        this.$set(this.form.userDeptAndWorkAddressVOList[index], 'workAddressName', undefined)
        this.$set(this.workAddresses, index, workAddressRes.data)
        this.workAddressIsDisabled = false
      })
      // getJobDutyTreeList({"deptId": 1}).then(res=> {
      //   this.jobDutysEnums = res.data
      // })
    },
    selectJob(jobId) {
      this.jobTitleIsDisabled = true
      this.$set(this.form, 'jobTitle', '')
      getListByJobId({'jobId': jobId}).then(jobTitleRes=> {
        console.log("job title list", jobTitleRes)
        this.jobTitles = jobTitleRes.data
        this.jobTitleIsDisabled = false
      })
    },
    removeDept(index) {
      this.form.userDeptAndWorkAddressVOList.splice(index, 1)
      this.workAddresses.splice(index, 1)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    search() {
      this.listLoading = true
      this.query.currentPage = this.currentPage
      this.query.pageSize = this.pageSize
      console.log("query", this.query)
      getList(this.query).then(res=>{
        console.log("init list:", res.data)
        this.list = res.data.records
        this.list.forEach(item=>{
          item.job = item.jobId
          item.jobTitle = item.jobTitleId
        })
        this.total = res.data.total
        this.listLoading = false
      }).catch(err=>{
        console.log(err)
        this.listLoading = false
      })
    },
    selectQueryJob(jobId) {
      this.jobTitleIsDisabled = true
      this.$set(this.query, 'jobTitleId', '')
      getListByJobId({'jobId': jobId}).then(jobTitleRes=> {
        this.queryJobTitles = jobTitleRes.data
        this.queryJobTitleIsDisabled = false
      })
    },
    isExist(authInfo, optType) {
      console.log(authInfo.optTypeList)
      console.log(optType)
      console.log(authInfo.optTypeList.includes(optType))
      return true;
    }

  }
}
</script>
